import React, { useState } from 'react'
import './ImportExportDemo.css'

// 导入默认导出
import formatDate from '../utils/helpers'

// 导入命名导出
import { 
  formatCurrency, 
  formatPhoneNumber, 
  APP_NAME, 
  VERSION, 
  config, 
  Calculator 
} from '../utils/helpers'

// 导入所有内容并重命名
import * as Helpers from '../utils/helpers'

function ImportExportDemo() {
  const [phoneNumber, setPhoneNumber] = useState('13812345678')
  const [amount, setAmount] = useState(1234.56)
  const [date, setDate] = useState(new Date())
  const [calcResult, setCalcResult] = useState('')

  // 使用导入的函数
  const handleFormatPhone = () => {
    const formatted = formatPhoneNumber(phoneNumber)
    alert(`格式化后的电话号码: ${formatted}`)
  }

  const handleFormatAmount = () => {
    const formatted = formatCurrency(amount)
    alert(`格式化后的金额: ${formatted}`)
  }

  const handleCalculate = () => {
    const calculator = new Calculator()
    const result = calculator.add(10, 20)
    setCalcResult(`10 + 20 = ${result}`)
  }

  return (
    <div className="import-export-demo">
      <h2>React 导入导出示例</h2>
      
      <div className="demo-section">
        <h3>📦 导入导出方式演示</h3>
        
        <div className="demo-grid">
          {/* 默认导出示例 */}
          <div className="demo-card">
            <h4>🔄 默认导出</h4>
            <p><strong>导入方式:</strong> <code>import formatDate from '../utils/helpers'</code></p>
            <p><strong>当前日期:</strong> {formatDate(date)}</p>
            <button onClick={() => setDate(new Date())}>
              更新日期
            </button>
          </div>

          {/* 命名导出示例 */}
          <div className="demo-card">
            <h4>📝 命名导出</h4>
            <p><strong>导入方式:</strong> <code>import {'{'} formatCurrency, formatPhoneNumber {'}'} from '../utils/helpers'</code></p>
            <div className="demo-item">
              <p><strong>金额格式化:</strong> {formatCurrency(amount)}</p>
              <input 
                type="number" 
                value={amount} 
                onChange={(e) => setAmount(parseFloat(e.target.value) || 0)}
                placeholder="输入金额"
              />
            </div>
            <div className="demo-item">
              <p><strong>电话格式化:</strong> {formatPhoneNumber(phoneNumber)}</p>
              <input 
                type="text" 
                value={phoneNumber} 
                onChange={(e) => setPhoneNumber(e.target.value)}
                placeholder="输入电话号码"
              />
            </div>
          </div>

          {/* 常量导出示例 */}
          <div className="demo-card">
            <h4>🔧 常量导出</h4>
            <p><strong>导入方式:</strong> <code>import {'{'} APP_NAME, VERSION {'}'} from '../utils/helpers'</code></p>
            <p><strong>应用名称:</strong> {APP_NAME}</p>
            <p><strong>版本号:</strong> {VERSION}</p>
            <p><strong>配置对象:</strong></p>
            <pre>{JSON.stringify(config, null, 2)}</pre>
          </div>

          {/* 类导出示例 */}
          <div className="demo-card">
            <h4>🏗️ 类导出</h4>
            <p><strong>导入方式:</strong> <code>import { Calculator } from '../utils/helpers'</code></p>
            <p><strong>计算结果:</strong> {calcResult}</p>
            <button onClick={handleCalculate}>
              计算 10 + 20
            </button>
          </div>

          {/* 全部导入示例 */}
          <div className="demo-card">
            <h4>🌟 全部导入</h4>
            <p><strong>导入方式:</strong> <code>import * as Helpers from '../utils/helpers'</code></p>
            <p><strong>可用的函数:</strong></p>
            <ul>
              <li>formatDate: {typeof Helpers.default}</li>
              <li>formatCurrency: {typeof Helpers.formatCurrency}</li>
              <li>formatPhoneNumber: {typeof Helpers.formatPhoneNumber}</li>
              <li>Calculator: {typeof Helpers.Calculator}</li>
            </ul>
          </div>
        </div>
      </div>

      <div className="code-examples">
        <h3>💻 代码示例</h3>
        
        <div className="code-section">
          <h4>导出方式:</h4>
          <pre>{`// 默认导出
export default function formatDate(date) {
  return new Date(date).toLocaleDateString('zh-CN')
}

// 命名导出
export function formatCurrency(amount) {
  return new Intl.NumberFormat('zh-CN', {
    style: 'currency',
    currency: 'CNY'
  }).format(amount)
}

// 导出常量
export const APP_NAME = 'React 导入导出示例'

// 导出类
export class Calculator {
  add(a, b) { return a + b }
}`}</pre>
        </div>

        <div className="code-section">
          <h4>导入方式:</h4>
          <pre>{`// 默认导入
import formatDate from '../utils/helpers'

// 命名导入
import { formatCurrency, APP_NAME } from '../utils/helpers'

// 全部导入
import * as Helpers from '../utils/helpers'

// 重命名导入
import { formatCurrency as formatMoney } from '../utils/helpers'`}</pre>
        </div>
      </div>
    </div>
  )
}

export default ImportExportDemo 